<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body></body>
  <script>
    //    Promise 解决的是回调地狱的问题，它可以让我们以同步的方式编写异步代码，避免了回调函数嵌套的问题。
    //    1.Promise 有三种状态 成功 失败 和 等待， 状态一旦更改，就不会再变。
    //    new Promise((resolve, reject)=>{}) 接受一个函数，这个函数有两个参数，分别是 resolve 和 reject，这个函数是同步执行的。
    //    resolve 成功的回调， reject 失败的回调。
    //    2.new Promise返回的还是一个Promise对象，该实例对象有三个方法：then、catch、finally。
    // then 方法接受两个参数，分别是成功的回调和失败的回调。
    // catch 方法只接受一个参数，是失败的回调。
    // finally 方法接受一个参数，无论成功还是失败都会执行。

    // .then() .catch() .finally() 返回一个新的Promise对象
    //    1.Promise.all() 方法可以将多个Promise实例包装成一个新的Promise实例。
    //    只有所有的实例都成功，才会返回成功的promise对象
    //    如果有一个失败，返回失败的promise实例，如果没有失败，有pending状态和fulfilled状态。返回pending状态的promise实例。
    //    2.Promise.race() 方法可以将多个Promise实例包装成一个新的Promise实例，只要有一个实例率先改变状态，就会返回该实例的promise。不会管Pending状态的实例。
    //    3.Promise.resolve() 方法可以返回一个成功的Promise对象。
    //    4.Promise.reject() 方法可以返回一个失败的Promise对象。

    /* 第一个案例  promise的基本使用*/
    // let p = new Promise((resolve, reject) => {
    //   console.log(1);
    //   resolve(3);
    //   console.log(2);
    // });
    // p.then((res) => {
 
    //   console.log(res);
    //   /* 1.这个地方报错 返回失败的Promise对象 */
    //   return fds;
    // })
    //   .then(
    //     /* 不会执行了 */
    //     (res) => {
    //       console.log("5");
    //       console.log(res, "11res");
    //     },
    //     (err) => {
    //       /* 2.这个地方会执行 */
    //       console.log(err, "err");
    //       /* 4.返回了一个新的Promise对象,且会执行.then的第一个函数 */
    //       return 1221;
    //     }
    //   )
    //   .then(
    //     (res) => {
    //       /* 5. 这里会执行 */
    //       console.log(res, "res执行了"); //1221
    //     },
    //     (err) => {
    //       console.log(err, "err1");
    //     }
    //   )
    //   /* 3.由于上面的Promise失败已经处理了，执行了上上个err的回调，这里不会执行 */
    //   .catch((err) => {
    //     console.log(err, "catch");
    //   });
  
    // /* 第二个案例  Promise.resolve()方法*/
    //  let p1 = Promise.resolve(2);

    // let p2 = Promise.resolve({ name: "zs" });
    // let p3 = Promise.resolve([1, 2, 3, 4]);
    // console.log(p1, p2, p3, );
    // p1.then((res) => {
    //   console.log(res); //2
    // });
    // p2.then((res) => {
    //   console.log(res); //{name: "zs"}
    // });
    // p3.then((res) => {
    //   console.log(res); //[1, 2, 3, 4]
    // });
    /* 第三个案例  Promise.reject()方法*/
     let p1 = Promise.reject("失败了");
    let p2 = Promise.reject({ name: "zs" });
    p1.then(
      (res) => {
        console.log(res, "res");
      },
      (err) => {
        console.log(err, "err");
        return '第一个';
      }
    ).then((res) => {
      console.log(res, "res123");
    });

    p2.then(
      (res) => {
        console.log(res, "res");
      },
      (err) => {
        console.log(err, "err");
        return '第二个';
      }
    ).then((res) => {
      console.log(res, "res123");
    });
    console.log(p1, p2);
    /* 第四个案例  Promise.all()方法*/
    /*     let p1 = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve("p1");
      }, 2000);
    });
    let p2 = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve("p2");
      }, 1000);
    });
    let p3 = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve("p3");
      }, 3000);
    });
    let arr = Promise.all([p1, p2, p3])
      .then((res) => {
        console.log(res, "res");
      })
      .catch((err) => {
        console.log(err);
      });
    console.log(arr, "arr"); //pedding
    setTimeout(() => {
      console.log(arr, "arr"); // fulfilled
    }, 4000); */
    /* 第五个案例  Promise.race()方法*/
    /*     let p1 = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve("p1");
      }, 2000);
    });
    let p2 = new Promise((resolve, reject) => { 
      setTimeout(() => {
        reject("p2");
      }, 1000);
    });
    let p3 = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve("p3");
      }, 3000);
    });
    let res = Promise.race([p1, p2, p3])
      .then((res) => {
        console.log(res, "res"); //p2
      })
      .catch((err) => {
        console.log(err);
      });
    console.log(res, "res"); */
  </script>
</html>
